<template>
  <div class="index">
    <div class="app-container">
      <div class="mainbox">
        <el-row :gutter="10">
          <el-col :span="12">
            <LeftTop :system-list="systemList" />
          </el-col>
          <el-col :span="12">
            <RightTop :system-list="systemList" />
          </el-col>
        </el-row>

        <el-row :gutter="10">
          <el-col :span="12">
            <LeftBottom />
          </el-col>
          <el-col :span="12">
            <RightBottom :interface-list="interfaceList"/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import LeftTop from './components/LeftTop'
import RightTop from './components/RightTop'
import LeftBottom from './components/LeftBottom'
import RightBottom from './components/RightBottom'
import { getSystemListApi, getInterfaceListApi } from '@/api/index'
export default {
  name: 'InterfacePlatformIndex',

  components: {
    LeftTop,
    RightTop,
    LeftBottom,
    RightBottom
  },

  data() {
    return {
      systemList: [],
      interfaceList: []
    }
  },

  created () {
    this.getSystemList()
  },

  methods: {
    // 获取可用系统 / 可用接口
    getSystemList () {
      getSystemListApi()
        .then(({ code, data }) => {
          if (code === '00000') {
            this.systemList = data
          }
        })

      getInterfaceListApi()
        .then(({ code, data }) => {
          if (code === '00000') {
            this.interfaceList = data
          }
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.index {
  width: 100%;
  background: #f0f0f0;

  .el-row {
    height: calc((100vh - 202px) / 2);
    &:last-child {
      margin-top: 10px;
    }
    .el-col {
      height: 100%;
      ::v-deep .area-container {
        height: 100%;
        background: #fff;
        box-shadow: 0px 0px 2px 1px #bbbaba;
        padding: 5px 10px;
        .area-title {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin: 0;
          padding: 5px 0;
          & > span {
            display: inline-block;
            border-left: 4px solid #8484e7;
            padding-left: 10px;
            border-radius: 2px;
          }
        }
      }
    }
  }

}
</style>
